<template>
  <div class="film_detail">
    <div class="title">
      <div><span>{{filmInfo.name}}</span><span>{{typeName}}</span></div>
      <div class="grade">{{filmInfo.grade}}分</div>
    </div>
    <div class="category">{{filmInfo.category}}</div>
    <div class="time">{{timeFormat}}</div>
    <div class="synopsis" :class="isIcon ? 'isHeight' : ''">{{filmInfo.synopsis}}</div>
    <div class="icon"><i @click="clickIcon" class="iconfont" :class="isIcon ? 'icon-xiangxia' : 'icon-xiangshang'"/></div>
  </div>
</template>

<script>
  export default {
    props:["filmInfo",'typeName'],
    data(){
      return {
        isIcon:true
      }
    },
    methods:{
      clickIcon(){
        this.isIcon = !this.isIcon
      }
    },
    computed:{
      timeFormat(){
        const d = new Date(this.filmInfo.premiereAt*1000)
        const year = d.getFullYear()
        const moth = time(d.getMonth() + 1)
        const date = time(d.getDate())
        function time(num){
          return num >= 10 ? num : "0" + num
        }
        return year + "-" + moth + "-" + date + "上映"
      }
    }
  }
</script>

<style lang="less" scoped>
.film_detail {
	margin-top: 20px;
	padding: 0px 10px;
	background: #ffffff;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		span:nth-child(1) {
			color: #191a1b;
			font-size: 18px;
			line-height: 24px;
			margin-right: 7px;
		}
		span:nth-child(2) {
			width: 20px;
			height: 14px;
			background: #d2d6dc;
			font-size: 9px;
			color: #ffffff;
			padding: 0px 2px;
			border-radius: 2px;
		}
	}
	.grade {
		color: #ffb232;
	}
	.category,
	.time {
		font-size: 13px;
		color: #797d82;
		margin-bottom: 10px;
	}
	.synopsis {
		font-size: 13px;
		color: #797d82;
		overflow: hidden;
	}
	.icon {
		text-align: center;
		.iconfont {
			font-size: 12px;
			color: #d2d6dc;
		}
	}
}
.isHeight {
	height: 34px;
}
</style>
